<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="openBtn">打开文件</button>    
    <img id="images"  style="width:100%" />
</body>

<script>
    const {dialog} = require('electron').remote
    var openBtn = document.getElementById('openBtn');
    openBtn.onclick = function(){
        dialog.showOpenDialog({
            title:'请选择你喜欢的照片',
            defaultPath: 'a1.jpg',
            filters:[
                {name:'img',extensions:['jpg']}
            ],
            buttonLabel: '打开图片'
        }).then(result=>{
            console.log('result: ', result)
            let image = document.getElementById('images')
            image.setAttribute("src",result.filePaths[0]);
        }).catch(err=>{
            console.log(err)
        })
    }

</script>

</html>